<template>
  <!-- 评论 -->
  <div id="discuss">
    <van-popup v-model="discussPopup"
               position="bottom"
               closeable
               close-icon="arrow-left"
               close-icon-position="top-left"
               :style="{ height: '100%' }">
      <nav>评论({{ total }})</nav>
      <div class="content">
        <van-cell class="musicDtl"
                  is-link
                  center>
          <template #icon
                    v-if="songsDtl.al">
            <van-image width="2rem"
                       height="2rem"
                       :src="songsDtl.al.picUrl" />
          </template>
          <template #title
                    v-if="songsDtl.ar">
            <div class="van-ellipsis musicDtl_title">
              <span>{{ songsDtl.name }}</span>
            </div>
          </template>
          <template #label>
            <div class="musicDtl_label">
              <template v-if="songsDtl.ar.length > 0">
                <span v-for="(arName, index) in songsDtl.ar"
                      :key="index">
                  {{ arName.name }}
                </span>
              </template>
              <template v-else>
                <span>{{ songsDtl.ar[0].name }}</span>
              </template>
            </div>
          </template>
        </van-cell>

        <div class="comment_area">
          <div class="title">
            <!-- <span>评论区</span> -->
            <van-tabs style="width:100%"
                      v-model="active"
                      animated>
              <van-tab title="最热">
                <van-list v-model="hotLoading"
                          :finished="hotFinished"
                          offset="10"
                          finished-text="没有更多了"
                          @load="handleHotOnLoad">
                  <van-cell-group>
                    <div v-for="(comment,index) in hotComments"
                         :key="index">
                      <van-cell center
                                :title="comment.user.nickname"
                                :label="comment.time|commentTime">
                        <template #icon>
                          <van-image width="35"
                                     height="35"
                                     round
                                     style="padding-right: 10px"
                                     :src="comment.user.avatarUrl" />
                        </template>
                        <template right-icon>
                          <span>{{comment.likedCount|likedCount}}</span>
                          <van-icon name="good-job-o"
                                    size="20"
                                    style="float: right;padding-top: 3px" />
                        </template>
                      </van-cell>
                      <div class="content">
                        <span>{{comment.content}}</span>
                      </div>
                      <!-- <p>{{comment.commentId}}条评论</p> -->
                    </div>
                  </van-cell-group>
                </van-list>
              </van-tab>
              <van-tab title="最新">
                <van-list v-model="newLoading"
                          :finished="newFinished"
                          offset="10"
                          finished-text="没有更多了"
                          @load="handleNewOnLoad">
                  <van-cell-group>
                    <div v-for="(comment,index) in newComments"
                         :key="index">
                      <van-cell center
                                :title="comment.user.nickname"
                                :label="comment.time|commentTime">
                        <template #icon>
                          <van-image width="35"
                                     height="35"
                                     round
                                     style="padding-right: 10px"
                                     :src="comment.user.avatarUrl" />
                        </template>
                        <template right-icon>
                          <span>{{comment.likedCount|likedCount}}</span>
                          <van-icon name="good-job-o"
                                    size="20"
                                    style="float: right;padding-top: 3px" />
                        </template>
                      </van-cell>
                      <div class="content">
                        <span>{{comment.content}}</span>
                      </div>
                      <!-- <p>{{comment.commentId}}条评论</p> -->
                    </div>
                  </van-cell-group>
                </van-list>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
let _this = this;
import {
  getCommentHot,
  getCommentMusic,
  getSongDetail,
  getCommentFloor,
} from '@/api/songSheet'
import { releaseTime } from '../../currency'
export default {
  name: 'discuss',
  data () {
    return {
      discussPopup: false,
      total: 0,
      active: 0,
      songsDtl: {},
      newComments: [],
      hotComments: [],
      musicId: '',
      hotLimit: 10,
      hotLoading: false,
      hotFinished: false,
      newLimit: 10,
      newLoading: false,
      newFinished: false,
      hotCommentsList: [],
    }
  },
  filters: {
    commentTime (value) {
      return releaseTime(value)
    },
    likedCount (value) {
      if (value >= 100000) {
        return (value / 10000).toFixed(1) + '万'
      } else if (value === 0) {
        return ''
      }
      return value
    },
  },
  methods: {
    handleNewOnLoad () {
      this.newLimit = this.newLimit + 10
      this.getComment()
      if (this.newLimit === 100) {
        this.newFinished = true
      }
    },
    handleHotOnLoad () {
      this.hotLimit = this.hotLimit + 10
      this.getHot()
      if (this.newLimit === 50) {
        this.hotFinished = true
      }
    },
    getInitData () {
      // 获取音乐详情
      getSongDetail(this.musicId).then((res) => {
        this.songsDtl = res.songs[0]
      })
      this.getComment()
    },
    getComment () {
      getCommentMusic(this.musicId, this.newLimit, 0).then((res) => {
        this.total = res.total
        this.newComments = res.comments
        this.loading = false
      })
    },
    getHot () {
      getCommentHot(this.musicId, this.hotLimit, 0).then((res) => {
        this.hotComments = res.hotComments
        this.hotLoading = false
      })
    },
  },
}
</script>

<style scoped>
#discuss {
  width: 100%;
  height: 100%;
}
#discuss nav {
  text-align: center;
  font-size: 0.45rem;
  padding-top: 0.426667rem;
}

.content .musicDtl {
  padding-top: 0.4rem;
}
.musicDtl /deep/ .van-image__img {
  border-radius: 0.15rem;
}
.content .musicDtl_title {
  font-size: 0.4rem;
  padding: 0 0 0 0.3rem;
}
.content .musicDtl_label {
  font-size: 0.3rem;
  padding: 0 0 0 0.3rem;
}
.title {
  width: 100%;
  display: flex;
}
.title span {
  font-size: 0.45rem;
  height: 100%;
}
.van-card {
  background: #fff;
}
.van-card__thumb {
  width: 40px;
  height: 40px;
}
#contentText {
  display: block;
  padding: 0.1rem 0 0 0;
  font-size: 0.42rem;
}
#reply {
  font-size: 0.35rem;
  color: #7b90af;
  padding-top: 0.1rem;
}
#discuss /deep/ .van-card__thumb img {
  border-radius: 50%;
}
#discuss .van-card__header {
  /* height: 70px; */
}
#discuss .content {
  padding: 0 0.426667rem;
}
#discuss .content span {
  font-size: 13.5px;
}
</style>